<template>
    <view class="carousel">
        <swiper :circular="true" :autoplay="false" :interval="3000" @change="onChange">
            <swiper-item v-for="item in list" :key="item.id">
                <navigator url="/pages/index/index" hover-class="none" class="navigator">
                    <image mode="aspectFill" class="image" :src="item.imgUrl"></image>
                </navigator>
            </swiper-item>
        </swiper>

        <!-- 指示点 -->
        <view class="indicator">
            <text
                v-for="(item, index) in list"
                :key="item.id"
                class="dot"
                :class="{ active: index === activeIndex }"
            ></text>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { BannerItem } from '@/types/home'

const activeIndex = ref(0)
const onChange: UniHelper.SwiperOnChange = (e) => {
    activeIndex.value = e.detail!.current
}
defineProps<{
    list: BannerItem[]
}>()
</script>

<style lang="scss">
@import '@/components/style/XtxSwiper.scss';
</style>
